<template>
  <div class="view_page">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="back-page">
            <div class="add-back" @click="back">
              <i class="fa fa-arrow-left" aria-hidden="true"></i>
              测点列表
            </div>
          </div>
        </div>
        <!--右侧-->
        <div class="right">
          <el-button type="primary" size="small" @click="navtoAdd('add')">新增
          </el-button>
        </div>
      </div>
      <div>
        <el-table :data="datalist" style="width: 100%" ref="myTable">
          <!-- 后加的 -->
          <el-table-column prop="id" label="序号" align="center" min-width="60"
                           max-width="100">
            <template slot-scope="scope">
              <div>
                {{ (pageNum - 1) * size + (scope.$index + 1) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="(item, ind) in tableList" :key="ind"
                           :label="item.label" :prop="item.key"
                           :align="item.align" :min-width="item.minWidth">
            <template slot-scope="scope">
              <div v-if="!item.isCustom" class="text-ellipsis-2">
                {{ scope.row[item.key] || item.defaultText }}
              </div>
              <div class="text-ellipsis-2" v-if="item.isCustom">
                {{ scope.row[item.key] || item.defaultText }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" prop="process" label="设备清单"
                           align="center" min-width="100"
                           v-if="buttonArr.includes('process')">
            <template slot-scope="scope">
              <el-button type="primary" size="small"
                         @click="toSupplierProcess(scope.row)">生产工艺
              </el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="210"
                           align="center"
                           v-if="buttonArr.includes('query')||buttonArr.includes('update')||buttonArr.includes('del')">
            <template slot-scope="scope">
              <div style="display: flex; align-items: center; flex-wrap: wrap">
                <el-button type="success" size="small"
                           @click="navtoAdd('query', scope.row)"
                           v-if="buttonArr.includes('query')">详情
                  <!--@click="toquery(scope.row.id)"-->
                </el-button>
                <el-button type="primary" size="small"
                           @click="navtoAdd('update', scope.row)"
                           v-if="buttonArr.includes('update')">编辑
                </el-button>
                <el-button type="danger" size="small" @click="del(scope.row)"
                           v-if="buttonArr.includes('del')">删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination :total="total" :currentPage="pageNum" :pageSize="size"
                    position="right"
                    @search="searchPagination">
        </pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import pagination from '@/components/common/pagination/pagination';

export default {
  components: {
    pagination,
  },
  data() {
    return {
      buttonArr: [],
      curPageKey: 'equipmentMeasurePoint',
      // 列表的数据
      tableList: [
        {
          key: "name",
          label: "测点名称",
          align: "center",
          minWidth: "120",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "number",
          label: "测点编号",
          align: "center",
          minWidth: "120",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "type",
          label: "测点类型",
          align: "center",
          minWidth: "150",
          defaultText: "--",
          isCustom: false
        },
        {
          key: "unit",
          label: "单位",
          align: "center",
          minWidth: "120",
          defaultText: "--",
          isCustom: false
        },
      ],
      // 列表的数据
      datalist: [
        {
          name: '测点名称',
          number: '测点编号XX1',
          type: '测点类型XX1',
          unit: '测点单位XX1',
        },
      ],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0,
      all_datalist: [],
    }
  },
  watch: {
    total: {
      handler(newVal, oldVal) {
        this.total = newVal || 0;
        if (this.total <= 0) {
          return;
        }
        let params = {
          page: 1,
          size: this.total,
        };
        // supplierList(params).then(res => {
        //   this.all_datalist = res.data;
        // });
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    // this.page = this.$store.getters.curPage[this.curPageKey] || 1;
    // this.$store.dispatch('curPage/resetOnePage', 'supplierProcess');
    this.getListPage();
  },
  methods: {
    getListPage() {
      let datas = {
        page: this.page,
        size: this.size,
      };
      // supplierList(datas).then(res => {
      //   this.datalist = res.data;
      //   this.total = res.rows;
      //   this.pageNum = res.page;
      //   this.$store.dispatch('curPage/updateCurrentPage', {
      //     page: this.curPageKey,
      //     num: this.pageNum,
      //   });
      //   // this.loading = false
      // })
    },
    //分页
    searchPagination(page) {
      this.page = page;
      // this.$store.dispatch('curPage/updateCurrentPage', {
      //   page: this.curPageKey,
      //   num: this.page,
      // });
      this.getListPage();
    },
    //跳转新增
    navtoAdd(type, item) {
      // this.$store.dispatch('curPage/updateCurrentPage', {
      //   page: this.curPageKey,
      //   num: this.page,
      // });
      if (type == "add") {
        this.$router.push({
          path: "/admin/equipmentAccount/measurePointAdd",
          query: {
            type: type,
          },
        });
      } else {
        this.$router.push({
          path: "/admin/equipmentAccount/measurePointAdd",
          query: {
            type: type,
            data: JSON.stringify(item),
          },
        });
      }
    },
    back() {
      // let newTagVisitedViews = this.$store.state.tagsView.visitedViews.filter(
      //   (item) => {
      //     return this.$route.path != item.path;
      //   });
      // this.$store.state.tagsView.visitedViews = newTagVisitedViews;
      this.$router.back();
    },
  }
}
</script>

<style scoped>

</style>
